<template>
	<view class="content">
		<view class="ischooseBlock">
			<view class="blockTitle">已选菜单</view>
			<view class="blockContent">
				<view class="contentItem" v-for="(item,index) in isChooseList" :key="item.id">
					<view class="delBtn" @click="changeChoose(item.id)">-</view>
					<view class="topBtn" @click="goTop(item.id)" v-if="item.istop === 0">↥</view>
					<view class="bomBtn" @click="goBom(item.id)" v-else>↧</view>
					{{item.id}}
				</view>
			</view>
		</view>
		<view class="notchooseBlock">
			<view class="blockTitle">更多功能</view>
			<view class="blockContent">
				<view class="contentItem" v-for="(item,index) in functionList" :key="item.id" v-show="!item.choose">
					<view class="addBtn" @click="changeChoose(item.id)">+</view>
					{{item.id}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functionList:[
					{id:1,choose:true,istop:1},{id:2,choose:false,istop:0},{id:3,choose:false,istop:0},{id:4,choose:false,istop:0},
					{id:5,choose:false,istop:0},{id:6,choose:false,istop:0},{id:7,choose:true,istop:2},{id:8,choose:false,istop:0},
					{id:9,choose:false,istop:0},{id:10,choose:false,istop:0},{id:11,choose:false,istop:0},{id:12,choose:false,istop:0},
					{id:13,choose:false,istop:0},{id:14,choose:false,istop:0},{id:15,choose:false,istop:0},{id:16,choose:false,istop:0},
					{id:17,choose:false,istop:0},{id:18,choose:false,istop:0},{id:19,choose:false,istop:0},{id:20,choose:false,istop:0},
				],
				functionJson: {},
				isChooseList:[],
				notChooseList:[],
			}
		},
		onLoad() {
			
		},
		mounted() {
			for(let i in this.functionList){
				this.functionList[i].index = i
				this.functionJson[this.functionList[i].id] = this.functionList[i]
			}
			this.classification()
		},
		methods: {
			classification(){
				this.isChooseList = []
				this.notChooseList = []
				for(let i = 0;i < this.functionList.length; i++){
					if(this.functionList[i].choose){
						this.isChooseList.push(this.functionList[i])
					}else{
						this.notChooseList.push(this.functionList[i])
					}
				}
				for(let i = 0; i < this.isChooseList.length-1; i++){
					for(let j = 0; j < this.isChooseList.length-1; j++){
						if(this.isChooseList[j].istop < this.isChooseList[j+1].istop){
							let obj = this.isChooseList[j]
							this.isChooseList[j] = this.isChooseList[j+1]
							this.isChooseList[j+1] = obj
						}
					}
				}
				for(let i = 0; i < this.isChooseList.length; i++){
					if(this.isChooseList[i].istop > 0){
						this.isChooseList[i].istop = this.isChooseList.length - i
						this.functionList[this.functionJson[this.isChooseList[i].id].index] = this.isChooseList[i]
					}
				}
			},
			changeChoose(key){
				this.functionList[this.functionJson[key].index].choose = !this.functionList[this.functionJson[key].index].choose
				this.functionList[this.functionJson[key].index].istop = 0
				this.classification()
			},
			goTop(key){
				this.functionList[this.functionJson[key].index].istop = this.isChooseList[0].istop + 1
				this.classification()
			},
			goBom(key){
				this.functionList[this.functionJson[key].index].istop = 0
				this.classification()
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}
	
	.ischooseBlock{
		width: 100%;
		min-height: 240rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	
	.notchooseBlock{
		width: 100%;
		min-height: 240rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	
	.blockTitle{
		width: 100%;
		height: 60rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		font-weight: 500;
		color:rgba(150, 150, 150, 1);
	}
	
	.blockContent{
		width: 100%;
		min-height: 200rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: start;
	}
	
	.contentItem{
		width: 173rpx;
		height: 173rpx;
		margin: 1rpx;
		border-radius: 8rpx;
		position: relative;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 173rpx;
	}
	
	.delBtn{
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(255, 47, 6, 0.2);
		font-size: 40rpx;
		font-weight: 500;
		text-align: center;
		line-height: 26rpx;
		color: rgba(255, 47, 6, 1);
	}
	
	.addBtn{
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(0, 132, 255, 0.2);
		font-size: 40rpx;
		font-weight: 500;
		text-align: center;
		line-height: 26rpx;
		color: rgba(0, 132, 255, 1);
	}
	
	.topBtn{
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(38, 255, 5, 0.2);
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 30rpx;
		color: rgba(38, 255, 5, 1.0);
	}
	
	.bomBtn{
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(216, 175, 23, 0.2);
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 30rpx;
		color: rgba(216, 175, 23, 1.0);
	}
</style>
